<template>
	<view class='tabbar'>
		<view 
			class='tab' 
			v-for="(item,index) in tabbarList" 
			:key='index'
			@tap='navigatorTo(item.pagePath)'
		 >
			<image v-if='item.pagePath === cureentPage ' :src="item.selectedIconPath" mode="aspectFill"></image>
			<image v-else :src="item.iconPath" mode="aspectFill"></image>
			<view v-if=' item.pagePath === cureentPage ' class='text1'>{{item.text}}</view>
			<view v-else class='text'>{{item.text}}</view>
		</view>
	</view>
</template>

<script>
export default{
	props:{
		cureentPage:{
			type:String,
			default:'index'
		}
	},
	data () {
		return {
			tabbarList:[
				{
					"pagePath": "index",
					"text": "首页",
					"iconPath": "/static/home.png",
					"selectedIconPath": "/static/a-home.png"
				}, {
					"pagePath": "member",
					"text": "会员",
					"iconPath": "/static/huiyuan.png",
					"selectedIconPath": "/static/a-huiyuan.png"
				},
				// {
				// 	"pagePath": "shop",
				// 	"text": "商城",
				// 	"iconPath": "/static/goods.png",
				// 	"selectedIconPath": "/static/activeGoods.png"
				// },
				{
					"pagePath": "map",
					"text": "地图",
					"iconPath": "/static/map.png",
					"selectedIconPath": "/static/a-map.png"
				}, 
				{
					"pagePath": "my",
					"text": "我的",
					"iconPath": "/static/my.png",
					"selectedIconPath": "/static/a-my.png"
				}
			]
		}
	},

	methods:{
		navigatorTo(e){
			uni.redirectTo({
				url:`../../pages/${e}/${e}`
			})
			// if(  e==='my' ){
			// 	this.navigateTo({
			// 		url:`../../pages/${e}/${e}`,
			// 		animationType:"fade-in",
			// 		animationDuration:0
			// 	})
			// }else{
			// 	uni.redirectTo({
			// 		url:`../../pages/${e}/${e}`
			// 	})
			// }
		}
	}
}
</script>

<style scoped>
.tabbar{
	border-top:2rpx solid #636263;
	background-color: #FFFFFF;
	position: fixed;
	left:0;
	bottom:0;
	width:100%;
	height: 120rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.tab{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
image{
	width: 48rpx;
	height: 48rpx;
	background-size: 100%;
}
.text{
	font-size:24rpx;
}
.text1{
	font-size:24rpx;
	color:#FF8732;
}
</style>
